<template>
  <!-- vue3页面 -->
  <div>
    {{ formState }}
    <a-form
      ref="formRef"
      hideRequiredMark
      :model="formState"
      name="basic"
      :label-col="{ span: 3 }"
      :wrapper-col="{ span: 21 }"
      autocomplete="off"
    >
      <a-form-item
        label="状态编码"
        name="code"
        :rules="[{ required: true, message: '请输入状态编码!' }]"
      >
        <a-input v-model:value="formState.code" />
      </a-form-item>
      <a-form-item
        label="状态名称"
        name="title"
        :rules="[{ required: true, message: '请输入状态名称!' }]"
      >
        <a-input v-model:value="formState.title" />
      </a-form-item>
      <a-form-item
        label="状态颜色"
        name="color"
        :rules="[{ required: true, message: '请输入状态颜色!' }]"
      >
        <a-input v-model:value="formState.color" />
      </a-form-item>
      <a-form-item
        label="是否签字"
        name="sign"
        :rules="[{ required: true, message: '请选择是否需要签字' }]"
      >
        <a-radio-group v-model:value="formState.sign" button-style="solid">
          <a-radio-button :value="true">是</a-radio-button>
          <a-radio-button :value="false">否</a-radio-button>
        </a-radio-group>
      </a-form-item>
      <a-form-item
        label="是否启用"
        name="status"
        :rules="[{ required: true, message: '请选择是否启用' }]"
      >
        <a-switch v-model:checked="formState.status" />
      </a-form-item>
      <a-form-item label="前置节点" name="ahead">
        <MySelect
          :value="formState.ahead"
          :title="'请选择前置节点'"
          :select-data="stateList"
          :field-names="{ label: 'title', value: '_id' }"
          @change="changeSelect($event, 'ahead')"
        />
      </a-form-item>
      <a-form-item label="后置节点" name="behind">
        <MySelect
          :value="formState.behind"
          :title="'请选择后置节点'"
          :select-data="stateList"
          :field-names="{ label: 'title', value: '_id' }"
          @change="changeSelect($event, 'behind')"
        />
      </a-form-item>
      <a-form-item label="关联菜单" name="menuId">
        <MySelect
          :value="formState.menuId"
          :title="'请选择后置节点'"
          :select-data="menuList"
          :field-names="{ label: 'name', value: '_id' }"
          @change="changeSelect($event, 'menuId')"
        />
      </a-form-item>

      <a-form-item :wrapper-col="{ offset: 5, span: 19 }">
        <a-button type="primary" style="width: 80%" @click="onFinish"
          >保存配置</a-button
        >
      </a-form-item>
    </a-form>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted } from "vue";
import { getOvertrueConfig, editOvertureConfig } from "@/api/overtrue";
import { useMenusStore } from "@/store/index";
import MySelect from "@/components/CommonDai/SelectSearch.vue";
import { message, FormInstance } from "ant-design-vue";

const props = defineProps<{
  editData?: any;
}>();
const emits = defineEmits<{
  (e: "updateOver"): void;
}>();
const formRef = ref<FormInstance>();
/** 表单数据的存储 */
let formState = reactive<FormState>({
  // 表单数据
  _id: "",
  code: null,
  title: null,
  color: "",
  sign: true,
  status: true,
  ahead: "",
  behind: "",
  menuId: "",
  menuName: "",
});
interface FormState {
  _id?: string;
  code: number | null;
  title: string | null;
  color: string;
  sign: boolean;
  status: boolean;
  behind: string;
  menuId: string;
  ahead: string;
  menuName: string;
  [key: string]: any;
}
/**  */
const menuList = ref<any[]>([]);
const stateList = ref<any[]>([]);
const menusStore = useMenusStore();

onMounted(async () => {
  if (props.editData !== undefined)
    formState = Object.assign(formState, props.editData);

  getOvertrueConfig().then((res: any) => {
    stateList.value = res.data.data.sort((a: any, b: any) => a.code - b.code);
  });
  const menu = await menusStore.getMenus();
  menuList.value = menu.sort((a, b) => a.order - b.order);
});

const changeSelect = (value: string, key: string) => {
  if (key === "menuId") {
    formState.menuId = value;
    formState.menuName = menuList.value.find(
      (item: any) => item._id === value
    )?.name;
  }
  formState[key] = value;
};

const onFinish = async () => {
  for (const [key] of Object.entries(formState)) {
    if (formState[key] === undefined) {
      formState[key] = null;
    }
  }

  editOvertureConfig(formState).then((res: any) => {
    emits("updateOver");
    message.success(res.message);
  });
};
</script>

<style scoped lang="less">
:deep(.ant-input) {
  border-radius: 5px;
}
</style>
